<template>
    <div>
    <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
    </el-row>
    <el-row :gutter="20">
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple ">
            <el-card :body-style="{ padding: '0px' }" class="container">
                <img src="../assets/list/image.png" class="image demo">
                <div style="padding: 14px;">
                    <span>"连接未来，尽在你的掌握。探索无限可能，从这部手机开始。"</span>
                    <div class="bottom clearfix">
                    <time class="time">{{ currentDate }}</time>
                    <el-button type="text" class="button">详情</el-button>
                    </div>
                </div>
            </el-card>
        </div></el-col>
    </el-row>
    </div>
</template>

<script>
export default {
    name:"list",
    data(){
        return {
            currentDate:"2024-12-12"
        }
    }
}
</script>

<style scoped>
    .el-row {
      margin-bottom: 20px;
    }
    .el-row:last-child {
      margin-bottom: 0;
    }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
/* card样式 */
    .time {
        font-size: 13px;
        color: #999;
    }

    .bottom {
        margin-top: 13px;
        line-height: 12px;
    }

    .button {
        padding: 0;
        float: right;
    }

    .image {
        width: 70%;
        display: block;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }

    .clearfix:after {
        clear: both
    }
    .container {
        display: flex;
    }
    .demo{
        align-self:center;
        margin:0 auto;
    }
</style>